<!doctype html>
<html dir="ltr" lang="en">
<head>
    <meta charset="utf-8">
    <title>IndexedDB</title>
    <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
    <link rel="stylesheet" href="indexeddb_internals.css">
</head>
<body>
    <!-- templates -->
    <div style="display:none">
        <div id="indexeddb-list-template"
             jsvars="stringifymojo:$this.stringifyMojo">
          <div id="indexeddb-partition" jsselect="$this.partitions">
            <div class="indexeddb-summary">
                <span jsdisplay="partitionPath.path">
                    <span>Instances in: </span>
                    <span jscontent="partitionPath.path"></span>
                </span>
                <span jsdisplay="!partitionPath.path">
                    <span>Instances: Incognito </span>
                </span>
                <span jscontent=
                  "`(Bucket count = ${stringifymojo.partitionBucketCount($this)})`"
                  ></span>
            </div>
            <div class="indexeddb-origin" jsselect="originList">
                <span jsvalues="$url:stringifymojo.origin(origin)">
                    Origin:
                    <a class="indexeddb-url" jscontent="$url"
                        jsvalues="href:$url" target="_blank"></a>
                </span>
                <div class="metadata-list-item" jsselect="storageKeys">
                  <span>Storage partition - top level site: 
                    <span jsvalues="$url:stringifymojo.schemefulSite(topLevelSite)">
                      <a class="indexeddb-url" jscontent="$url"
                              jsvalues="href:$url" target="_blank"></a>
                    </span>
                  </span>
                  <div>
                      <span>Storage key:</span>
                      <span jscontent="serializedStorageKey"></span>
                  </div>
                  <indexeddb-bucket class="metadata-list-item"
                                    jsselect="buckets" 
                                    jsvalues=".idbBucketId:bucketLocator.id;">
                      <div>
                          <span>Bucket:</span>
                          <span jscontent="`'${name}'`"></span>
                      </div>
                      <div class="indexeddb-size">
                          <span>Size:</span>
                          <span jscontent="size"></span>
                      </div>
                      <div class="indexeddb-last-modified">
                          <span>Last modified:</span>
                          <span jscontent="stringifymojo.time(lastModified)"></span>
                      </div>
                      <div>
                          <span>Open connections:</span>
                          <span class="connection-count"
                                jscontent="connectionCount">
                      </div>
                      <div class="indexeddb-paths">
                          <span>Paths:</span>
                          <span class="indexeddb-path" jsselect="$this.paths">
                              <span jscontent="path"></span>
                          </span>
                      </div>
                      <div class="controls">
                          <span class="control force-close">Force close</span>
                          <span class="control download">Download</span>
                          <a class="control" href="https://crbug.com/829141"
                            target="_blank">?</a>
                          <span class="download-status" style="display: none">Loading...</span>
                      </div>
                      <div class="indexeddb-database" jsselect="$this.databases">

                        <span>Open database:</span>
                        <span jscontent="stringifymojo.string16(name)"></span>

                        <div>
                          <span>Connections:</span>

                          <span class="indexeddb-connection-count"
                                jsdisplay="connectionCount">
                            <span>open:</span>
                            <span jscontent="connectionCount"></span>
                          </span>

                          <span class="indexeddb-connection-count pending"
                                jsdisplay="active_open_delete">
                            <span>active opens/deletes:</span>
                            <span jscontent="active_open_delete"></span>
                          </span>

                          <span class="indexeddb-connection-count pending"
                                jsdisplay="pending_open_delete">
                            <span>pending opens/deletes:</span>
                            <span jscontent="pending_open_delete"></span>
                          </span>

                        </div>
                        <div jsdisplay="$this.transactions &amp;&amp;
                                        $this.transactions.length">
                          <span>Transactions:</span>

                          <table class="indexeddb-transaction-list">
                            <tbody>
                              <tr>
                                <th title="Process ID of the tab or SharedWorker that created the transaction">
                                  Process ID
                                </th>
                                <th title="Transaction ID (unique within Process)">
                                  ID
                                </th>
                                <th title="Type of transaction">
                                  Mode
                                </th>
                                <th title="Names of object stores used by the transaction">
                                  Scope
                                </th>
                                <th title="Number of requests that have been executed">
                                  Completed Requests
                                </th>
                                <th title="Number of requests that have not yet been executed">
                                  Pending Requests
                                </th>
                                <th title="Time since transaction creation">
                                  Age (ms)
                                </th>
                                <th title="Time since transaction started">
                                  Runtime (ms)
                                </th>
                                <th title="Status in the transaction queue">
                                  Status
                                </th>
                              </tr>
                              <tr class="indexeddb-transaction"
                                  jsselect="$this.transactions"
                                  jsvalues=
                                    "$status:stringifymojo.transactionState($this.status);
                                    $status_lower:$status.toLowerCase()"
                                  jseval="this.classList.add($status_lower)">

                                <td class="indexeddb-transaction-pid"
                                    jscontent="pid">
                                </td>

                                <td class="indexeddb-transaction-tid"
                                    jscontent="tid">
                                </td>

                                <td class="indexeddb-transaction-mode"
                                    jscontent="stringifymojo.transactionMode(mode)">
                                </td>

                                <td class="indexeddb-transaction-scope"
                                    jscontent="stringifymojo.scope(scope)">
                                </td>

                                <td class="indexeddb-transaction-requests-complete"
                                    jscontent="tasksCompleted">
                                </td>

                                <td class="indexeddb-transaction-requests-pending"
                                    jscontent="tasksScheduled - tasksCompleted">
                                </td>

                                <td class="indexeddb-transaction-age"
                                    jscontent="Math.round(age)">
                                </td>

                                <td class="indexeddb-transaction-age">
                                  <span jsdisplay="$status_lower == 'started' ||
                                                   $status_lower == 'running' ||
                                                   $status_lower == 'committing'"
                                        jscontent="Math.round(runtime)">
                                  </span>
                                </td>

                                <td class="indexeddb-transaction-state"
                                    jscontent="$status">
                                </td>
                              </tr>
                            </tbody>
                          </table>
                        </div>
                      </div>
                  </div>
                </div>
              </div>
          </div>
        </div>
    </div>
    <h1>IndexedDB</h1>
    <div class="content">
        <div id="indexeddb-list"></div>
    </div>
    <script type="module" src="indexeddb_internals.js"></script>
</body>
</html>
